<template>
  <view class="waterfall_flow_container">
    <view class="waterfall_flow_row" :style="{ '--waterfall_flow-width': 100 / flowData.column - flowData.columnSpace + '%' }" v-for="(numVal, index) in flowData.column" :key="numVal">
      <view class="waterfall_flow_col" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
        <slot :row="item"></slot>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { IWaterfallFlowInterface } from '#/container/IWaterfallFlow';
import { PropType, ref } from 'vue';
const props = defineProps({
  waterfallFlowData: {
    type: Object as PropType<IWaterfallFlowInterface>, // 明确类型为 string
    required: true,
    default: () => ({
      column: 2, // 瀑布列数
      columnSpace: 2 // 瀑布列宽间距
    })
  }
});
const flowData = ref<IWaterfallFlowInterface & { list: any[]; [index: string]: any }>({
  list: [],
  column: 2, // 瀑布列数
  columnSpace: 2 // 瀑布列宽间距
});

const dynamicGrouping = (data: any[], i: number) => {
  if (i <= 0) return '分组数必须大于0';
  const groups: any[] = [];
  for (let j = 0; j < i; j++) {
    groups.push([]);
  }
  for (let k = 0; k < data.length; k++) {
    const groupIndex = k % i;
    groups[groupIndex].push(data[k]);
  }
  return groups;
};
const init = (dataList: any[]) => {
  const oldList = flowData.value.list;
  dataList.forEach(item => oldList.push(item));
  flowData.value = {
    ...props.waterfallFlowData,
    list: [...oldList]
  };
  for (let i = 1; i <= flowData.value.column; i++) {
    if (!flowData.value[`column_${i}`]) {
      flowData.value[`column_${i}`] = [];
    }
  }
  const groupList: any = dynamicGrouping(flowData.value.list, flowData.value.column); // 数据动态分组
  groupList.forEach((argList: any, i: number) => argList.forEach((item: any) => flowData.value[`column_${i + 1}`].push({ ...item })));
};
defineExpose({
  init
});
</script>

<style scoped lang="scss">
.waterfall_flow_container {
  display: flex;
  justify-content: space-between;
  $borderRadius: 12rpx;
  .waterfall_flow_row {
    width: var(--waterfall_flow-width);
    .waterfall_flow_col {
    }
  }
}
</style>
